import React,{ Component } from 'react';
class GuestNumber extends Component{
  constructor(props) {
     super(props);
     this.state = {
       number : "",
       times : 1,
       disabled: false,
       numbers :[],
       random : Math.floor(Math.random()*10e1)+"",
       describe:""
     }
     this.SubmitBtn = this.SubmitBtn.bind(this);
     this.InputChange = this.InputChange.bind(this);
     this.NewGame = this.NewGame.bind(this);
  }
  SubmitBtn(e){
    console.log(this.state.random);
    if(this.state.number === this.state.random){
      this.setState({
        disabled:true,
        describe:"你猜对了恭喜哦!"
      })
    }else if(this.state.number>this.state.random){
      this.setState({
        describe:"你猜的大了点哦！"
      })
    }else{
      this.setState({
        describe:"你猜的小了点哦！"
      })
    }
    this.state.numbers.push(this.state.number === "" ? 0 : this.state.number);
    this.setState({
      times : this.state.times + 1,
      numbers:this.state.numbers,
      number: ""
    });
    if(this.state.times === parseInt(this.props.times,10)){
       this.setState({
         disabled:true,
         describe:"很遗憾游戏结束了！"
       });
     }
  }
  NewGame(){
     this.setState({
       number : "",
       times : 1,
       disabled: false,
       numbers :[],
       random : Math.floor(Math.random()*10e1)+"",
       describe:""
     })
  }
  InputChange(e){
    let value = e.target.value;
    this.setState({number : value});
  }
  render(){
    const str = "We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.";
    return(
       <div>
           <h1> number guessing game </h1>
           <p>{str}</p>
           <input type="text" value={this.state.number} onChange={this.InputChange}  disabled={this.state.disabled ? "disabled" : ""} />
           <p>{this.state.numbers.join(';')}</p>
           <button onClick={this.SubmitBtn} disabled={this.state.disabled ? "disabled" : ""} >Submit Guess</button>
          <p>{this.state.describe}</p>
          <button onClick={this.NewGame} className={this.state.disabled ? "" : "hide"}>Start New Game</button>
          <ruby>里<rp>(</rp><rt>lǐ</rt><rp>)</rp></ruby>
       </div>
    );
  }
}

export default GuestNumber;
